<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" >
            <div class="layui-form-item">
                <label for="" class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="nombre" value="<?php echo $form['nombre']; ?>" placeholder="请输入名称" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="" class="layui-form-label">描述</label>
                <div class="layui-input-inline">
                    <input type="text" name="descripcion" value="<?php echo $form['descripcion']; ?>" placeholder="请输入描述" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="" class="layui-form-label">字段设计</label>
                <div class="layui-input-block">
                    <table class="layui-table" >
                        <thead>
                        <tr>
                            <th>排序</th>
                            <th>字段名称</th>
                            <th>字段类型</th>
                            <th>字段值</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="form-designer">
                            <tr>
                                <td width="70"><input type="number" class="layui-input layui-disabled orden" readonly value="" placeholder="序号" /></td>
                                <td><input type="text" class="layui-input layui-disabled etiqueta" placeholder="字段名称，如：name" readonly /></td>
                                <td>
                                    <select class="layui-disabled tipo" disabled>
                                        <?php foreach (Yii::$app->params['field_type'] as $k=>$v){ ?>
                                            <option value="<?php echo $k; ?>"><?php echo $v; ?></option>
                                        <?php } ?>
                                    </select>
                                </td>
                                <td><input type="hidden" class="value" value=""></td>
                                <td><span id="addField" title="添加"><i class="layui-icon layui-icon-add-1"></i></span></td>
                            </tr>
                            <?php foreach ($form_fields as $f){ ?>
                            <tr field-id="<?php echo $f['id']; ?>">
                                <td width="70"><input type="number" class="layui-input orden" value="<?php echo $f['orden']; ?>" placeholder="序号" /></td>
                                <td><input type="text" class="layui-input etiqueta" value="<?php echo $f['etiqueta']; ?>" placeholder="字段名称，如：name" /></td>
                                <td>
                                <select class="tipo">
                                    <?php foreach (Yii::$app->params['field_type'] as $k=>$v){ ?>
                                        <option value="<?php echo $k; ?>" <?php if ($k==$f['tipo']){echo 'selected';} ?> ><?php echo $v; ?></option>
                                    <?php } ?>
                                </select>
                                </td>
                                <td>
                                    <?php
                                        if ($f['tipo']=='LIST' && $f['value']){
                                            $cont = '';
                                            foreach (explode(',',$f['value']) as $d){
                                                $cont .=$d."\n";
                                            }
                                    ?>
                                            <textarea class="layui-textarea value"><?php echo $cont; ?></textarea>
                                    <?php }else{ ?>
                                        <input type="hidden" class="value" value="">
                                    <?php } ?>
                                </td>
                                <td><span onclick="removeField(this)" title="删除"><i class="layui-icon layui-icon-delete"></i></span></td>
                            </tr>
                            <?php } ?>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="submitForm">确认</button>
                    <a href="<?php echo \yii\helpers\Url::to(['index']); ?>" class="layui-btn layui-btn-primary">返回列表</a>
                </div>
            </div>
        </form>
    </div>
</div>


<?php
$url = yii\helpers\Url::to(['edit','id'=>$form['id']]);
$form_index = yii\helpers\Url::to(['index']);
$tipo = '';
foreach (Yii::$app->params['field_type'] as $k=>$v){
    $tipo .='<option value="'.$k.'">'.$v.'</option>';
}

$js = <<<JS

    layui.use(['form','element','table', 'layer'],function() {
        var form = layui.form;  
        var element = layui.element;  
        var table = layui.table;  
        var layer = layui.layer;  
        
        window.removeField = function (obj){
            $(obj).parent("td").parent("tr").remove()
            //删除后重新排序
            if ($("#form-designer tr").length>1) {
                $("#form-designer tr").each(function(index,item) {
                    if (index>0){
                        $(item).find("td").eq(0).find(".orden").val(index)
                    }
                })
            }
        }
        
        //监听select
        form.on("select",function(data) {
            if (data.value=='LIST'){
                $(data.elem).parent("td").next("td").html('<textarea class="layui-textarea value" placeholder="每行一个值"></textarea>')
            }else {
                $(data.elem).parent("td").next("td").html('<input type="hidden" class="value" value="">')
            }
            
        })
        
        //添加字段
        $("#addField").click(function() {
            if ($("#form-designer tr").length>=10){
                layer.msg('最多10个字段');
                return false
            }
            var _tr  ='<tr field-id="0">'
                _tr +='     <td width="70"><input type="number" class="layui-input orden" value="'+$("#form-designer tr").length+'" placeholder="序号" /></td>'
                _tr +='     <td><input type="text" class="layui-input etiqueta" placeholder="字段名称，如：name" /></td>'
                _tr +='     <td>'
                _tr +='         <select class="tipo">'
                _tr +='              {$tipo}'
                _tr +='         </select>'
                _tr +='         </td>'
                _tr +='     <td><input type="hidden" class="value" value=""></td>'
                _tr +='     <td><span onclick="removeField(this)" title="删除"><i class="layui-icon layui-icon-delete"></i></span></td>'
                _tr +='</tr>'
            $(_tr).appendTo("#form-designer")
            form.render()
        })
        
        //监听表单提交
        form.on('submit(submitForm)',function(data) {
            var index = layer.load()
            var where = data.field
            var form_fields = [];
            $("#form-designer tr").each(function(index,item) {
                var orden     = $(item).find(".orden").val()      
                var etiqueta  = $(item).find(".etiqueta").val()      
                var tipo      = $(item).find(".tipo").val() 
                var value     = $(item).find(".value").val() 
 
                //至少有一个有值才添加
                if ( orden && etiqueta ) {
                    form_fields.push({
                        "orden"     : orden,
                        "etiqueta"  : etiqueta,
                        "tipo"      : tipo,
                        "value"     : value,
                        "field-id"  : $(item).attr("field-id")
                    })
                }
            })
            if (form_fields.length==0){
                layer.close(index)
                layer.msg("请至少完成一个字段设计")
                return false
            } 
            where['form_fields'] = form_fields;
            $.post("{$url}",where,function(res) {
                layer.close(index)
                layer.msg(res.msg,{},function() {
                    if (res.code==0){
                        location.href = '{$form_index}'
                    }   
                })   
            })
            return false
        })
        
    });
JS;
$this->registerJs($js);
